import React, { forwardRef, useEffect, useImperativeHandle } from "react";
import { Form, Input } from "antd";

const AddRole = forwardRef((props, ref) => {
  const [form] = Form.useForm();

  useImperativeHandle(ref, () => ({
    validateFields: form.validateFields,
  }));

  useEffect(() => {
    form.resetFields();
  }, []);

  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 15 },
  };

  return (
    <Form form={form} {...formItemLayout}>
      <Form.Item
        label="角色名称"
        name="roleName"
        rules={[
          {
            required: true,
            message: "必须输入角色名称",
          },
        ]}
      >
        <Input placeholder="请输入角色名称" />
      </Form.Item>
    </Form>
  );
});

export default AddRole;
